import React, { Component } from 'react'

export default class Count extends Component {
  constructor() {
    super()
    // 定义状态
    // 注意: 并不是所有的数据,都要写在状态中. 需要在页面上渲染的数据,才应该写在状态中
    this.state = {
      count: 0,
      msg: '我给你一百万',
    }
  }
  render() {
    // 注意: render组件中的this,一定是当前组件实例

    return (
      <div>
        <div id="box">{this.state.count}</div>
        <div>{this.state.msg}</div>
        <button
          onClick={() => {
            // this.setState({
            //   count: this.state.count + 1,
            //   msg: '我不给了',
            // })
            // this.setState({
            //   count: this.state.count + 2,
            // })
            // this.setState({
            //   count: this.state.count + 3,
            // })

            // this.setState第一个参数,如果是回调函数,回调函数的调用时机是上一次state修改完毕
            // this.setState((newState) => {
            //   return {
            //     count: newState.count + 1,
            //   }
            // })
            // this.setState((newState) => {
            //   return {
            //     count: newState.count + 2,
            //   }
            // })
            this.setState((newState) => {
              return {
                count: newState.count + 1,
              }
            })
            this.setState((newState) => {
              console.log(newState.count)
              console.log(document.getElementById('box').innerText)
              return {
                count: newState.count + 2,
              }
            })

            // this.setState({ count: this.state.count + 1 }, () => {
            //   console.log('数据修改完毕了,并且视图也更新完毕')
            //   console.log(this.state.count)
            //   console.log(document.getElementById('box'))
            // })
          }}
        >
          +
        </button>
      </div>
    )
  }
}
